<template>
  <div class="header">
    <h1>Header:count:{{ count }}</h1>
    <h1>Header:mycount:{{ mycount }}</h1>
    <button @click="count++">修改父组件传递过来的props</button>
    <button @click="mycount++">修改子组件自己的数据 基于props</button>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ["count"],
  data() {
    return {
      //如果一定要修改父组件给的数据,则需要使用自己定义一个数据接受父组件的props
      mycount: this.count,
    };
  },
  mounted() {
    console.log(this, "header");
  },
};
</script>

<style>
.header {
  border: 1px solid #000;
}
</style>
